import React from "react";
import Stack from "./Stack";
import Icon from "./Icon";
import Text from "./Text";

const List = ({ leftIcon, title = "Title", subtitle, children }) => {
  return (
    <Stack gap="12" orientation="horizontal">
      {leftIcon !== undefined && (
        <Stack alignSelf="center">
          <Icon icon={leftIcon} />
        </Stack>
      )}
      <Stack alignItems="center" width="100%" orientation="horizontal" gap="12">
        <Stack width="100%" gap="2">
          <Text text={title} textStyle="body1" />
          <Text text={subtitle} textStyle="caption" />
        </Stack>
        {children}
      </Stack>
    </Stack>
  );
};

export default List;
